<template>
    <div id="recom">
        <div class="swipe">
            <mt-swipe :auto="4000">
                <mt-swipe-item>
                    <img src="../../assets/img/pic_1.jpg" alt="">
                </mt-swipe-item>
                <mt-swipe-item>
                    <img src="../../assets/img/pic_2.jpg" alt="">
                </mt-swipe-item>
            </mt-swipe>
        </div>

        <ul>
            <li v-for="item in lists">
                {{item}}
            </li>
        </ul>
    </div>
</template>

<script>
    import Header from '../common/Header.vue';

    export default {
        name: 'recom',
        data () {
            return {
                lists: []
            }
        },
        mounted: function() {
            for (var i = 1; i <= 30; i++) {
                this.lists.push('item' + i);
            }
        }
    }
</script>

<style lang="scss">
    #recom .swipe {
        height: 166px;

        img {
            height: 166px;
        }

        .mint-swipe-indicator {
            opacity: 1;
        }
    }
    #recom li {
        height: 40px;
        line-height: 40px;
    }
</style>